<template>
    <div class="navMenu_head">
        <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"> -->
        <template v-for="item in data">
            <el-submenu
                :index="item.menuName"
                :show-timeout="0"
                :hide-timeout="0"
                v-if="item.child.length>0"
                :key="item.menuName"
                :class="{'navMenu_head_item':flages}"
            >
                <template slot="title">{{item.menuName}}</template>
                <nav-menu :data="item.child"></nav-menu>
            </el-submenu>
            <!-- <el-menu-item v-else
                   :index="item.menuLink" :key="item.menuName"
               {{item.menuName}}
            </el-menu-item>-->
            <!-- <router-link v-if="checkRouteType(item) === 'link'" :to="wrapRouterLink(item)" :key="item.menuName" replace> -->
            <el-menu-item
                :class="{'navMenu_head_item':flages,'addLiHidden':isRoutreHide(item)}"
                v-if="checkRouteType(item) === 'link'"
                :key="item.menuName"
                :index="wrapRouterPath(item.routerName)"
                @click="handleClick(item)"
            >{{ item.menuName }}</el-menu-item>
            <!-- </router-link> -->
        </template>
        <!-- </el-menu> -->
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { isEmpty } from '@/utils/Common';
import { eachProp, isEmptyObject } from '@/utils/Object';
import { commonMenuCheck } from '@/utils/menuRules';

export default {
    name: 'navMenu',
    data() {
        return {
            activeIndex: '',
        };
    },
    props: ['data', 'flages'],
    // 取缓存信息
    computed: mapState({
        checkData: state => state.common.checkData, // 菜单校验缓存字段
        checAllData: state => state.common.checAllData, // 菜单校验缓存字段
        defaultParams: state => state.common.defaultParams, // 默认请求报文
        inlineParams: state => state.common.inlineParams, // 默认行内请求报文
        customerInfo_3002: state => state.common.customerInfo_3002, // 客户信息
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
    }),
    mounted() { },
    updated() {
        this.$emit('flagesUpdate');
        // let setI = setInterval(()=>{
        //     //  if(this.flages){this.flages = false}
        //     clearInterval(setI);
        // },200)
    },
    methods: {
        // 路由菜单点击事件
        async handleClick(val) {
            console.log(val.rules, '当前选择菜单数据');
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            const inlineParams = JSON.parse(JSON.stringify(this.inlineParams));
            const customerInfo_3002 = JSON.parse(
                JSON.stringify(this.customerInfo_3002),
            );
            const cardInfo_3004 = JSON.parse(JSON.stringify(this.cardInfo_3004));
            defaultParams.sysHead.busiName = inlineParams.sysHead.busiName = val.menuName;
            this.$store.commit('common/UPDATE_DEFAULT_PARAMS', defaultParams);
            this.$store.commit('common/UPDATE_INLINE_PARAMS', inlineParams);
            if (!isEmptyObject(customerInfo_3002)) {
                const params = {
                    agentNo: defaultParams.sysHead.loginID, // 坐席工号
                    bankNum: defaultParams.body.appHead.bnknbr, // 银行号
                    businessName: defaultParams.sysHead.busiName, // 业务名称
                    callId: defaultParams.sysHead.sessionID, // 会话ID
                    // createTime: new Date(), // 创建时间
                    menuName: val.menuName, // 菜单名称
                    cardNo: cardInfo_3004.CARDNO, // 卡号
                    certificateType: customerInfo_3002.KEYTYPE, // 证件类型
                    certificate: customerInfo_3002.CUSTID, // 证件号
                    custName: customerInfo_3002.CHINAME, // 客户名称
                    phone: customerInfo_3002.MOBILEPHONE, // 客户手机号
                };
                this.$post.common.addOptTrail(params);
            }
            let checkFlag = { flag: true, SAFETY: 'none' }; // 菜单校验标志 -> 默认为校验成功
            console.log(checkFlag, 'checkFlagcheckFlag');
            // 如果路由验证规则有数据则进入当前逻辑进行验证
            if (val.rules && val.rules.length) {
                // 调用方法判断是否需要验证
                checkFlag = await commonMenuCheck(val.rules, this.checAllData, this);
            }
            // 如果风险验证，跳转至风险验证, 如果前面已经有未验证通过的了就不再继续风险验证
            if (checkFlag.SAFETY === 'high' && checkFlag.flag) {
                // 再次确定是否高风险验证
                const confirmResult = await this.$confirm(
                    '当前操作需要进行高风险验证, 是否继续?',
                    '高风险验证提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        customClass: 'warning', type: 'warning',
                        showClose: false,
                    },
                ).catch(err => err);
                if (confirmResult !== 'confirm') return this.$message.info('已取消高风险验证');
                this.$router.push('/authentication/randomHeightRisklevel');
            } else if (checkFlag.SAFETY === 'medium' && checkFlag.flag) {
                // 再次确定是否高风险验证
                const confirmResult = await this.$confirm(
                    '当前操作需要进行中风险验证, 是否继续?',
                    '中风险验证提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        customClass: 'warning', type: 'warning',
                        showClose: false,
                    },
                ).catch(err => err);
                if (confirmResult !== 'confirm') return this.$message.info('已取消中风险验证');
                this.$router.push('/authentication/randommiddlerisklevel');
            } else if (checkFlag.flag) {
                // 验证通过跳转至功能页面
                this.$router.push(val.routerName);
            }
        },
        // 判断 router 里的hiede的值
        isRoutreHide(value) {
            return value.isVisible === '0';
        },
        // 检查某个路由节点是叶子菜单还是非叶子菜单（叶子菜单：可以直接点击路由到某个链接）
        checkRouteType(route) {
            // 如果没有子路由，则一定是叶子菜单
            if (!route.child || route.child.length === 0) {
                return 'link';
            }

            // 如果具有子路由，检查子路由中非隐藏路由的个数
            let flag = 0;
            eachProp(route.child, (child) => {
                if (!child.hidden) {
                    flag += 1;
                }
            });

            if (flag === 0) {
                // 如果子路由都是隐藏路由，则父路由显示为叶子菜单
                return 'link';
            }
            // console.log('route.name'+route.menuName);
            return 'sub';
        },

        wrapRouterLink(item) {
            const route = {
                params: {
                    jumpFlag: true,
                },
            };

            if (item.name) {
                route.name = item.name;
            } else if (item.routerName) {
                route.path = this.wrapRouterPath(item.routerName);
            } else {
                route.path = '/404';
            }

            return route;
        },

        wrapRouterPath(path) {
            if (isEmpty(path)) {
                return '';
            }
            if (path.charAt(0) !== '/') {
                return `/${path}`;
            }
            return path;
        },
    },
};
</script>

<style lang='scss' scoped >
.addLiHidden {
    display: none;
}
.navMenu_head {
    // max-height: 500px;
    // overflow-y: auto;
}
/*水平样式*/
.el-menu--horizontal > div > .el-submenu {
    float: left;
}
/*一级菜单的样式*/
.el-menu--horizontal > div > .el-menu-item {
    float: left;
    font-size: 15px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #909399;
}
/*解决下拉的、三角图标*/
.el-menu--horizontal > div > .el-submenu /deep/ .el-submenu__icon-arrow {
    position: static;
    vertical-align: middle;
    margin-left: 8px;
    margin-top: -3px;
}
/*解决无下拉菜单时不对齐问题*/
.el-menu--horizontal > div > .el-submenu /deep/ .el-submenu__title {
    font-size: 15px;
    font-weight: 600;
    top: 2px;
    height: 36px;
    line-height: 36px;
    color: #303133;
}
</style>
